zizhujianzhan_web/pages/[dir]/index.html.vue

<template>
    <!-- 头部 -->
    <templateHead></templateHead>
    <!-- 菜单 -->
    <templateMenu></templateMenu>
    <!-- 内容 -->
    <!-- <div>
        <templateChannelMenu :skinId="skinId" :navigateData="navigateData.data" :templateData="testTemplateData2" :routeId="routeId"></templateChannelMenu>
        <templateScrollList :skinId="skinId" :templateData="testTemplateData"></templateScrollList>
        <templateNewSector3 :skinId="skinId" :templateData="testTemplateData"></templateNewSector3>
        <templateAd :adTag="'nmw_category_0001'" :skinId="skinId" :adData="adData"></templateAd>
        <templateNewSector1 :skinId="skinId" :templateData="testTemplateData"></templateNewSector1>
        <templateNewSector2 :skinId="skinId" :templateData="testTemplateData"></templateNewSector2>
    </div> -->
    <div v-for="(item,index) in templateData" :key="index">
        <div v-if="item.sectorName=='channelMenu'">
            <templateChannelMenu :skinId="skinId" :routeId="routeId" :navigateData="navigateData.data" :templateData="item.componentList"></templateChannelMenu>
        </div>
    </div>
    <!-- 底部 -->
    <templateFoot></templateFoot>
</template>

<script setup>
//0.加载全局模板组件 start---------------------------------------->
//0.1全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
//0.2局部通栏
//0.2.1广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2 频道菜单
import templateChannelMenu from '@/components/template/sector/body/class/menu/1200x100/1.vue'
//0.2.3 滚动图文组合
import templateScrollList from '@/components/template/sector/body/class/banner/1200x410/1.vue'
//0.2.3 图文组合1
import templateNewSector1 from '@/components/template/sector/body/index/list/1200x470/1.vue'
//0.2.4 图文组合2
import templateNewSector2 from '@/components/template/sector/body/index/list/1200x470/2.vue'
//0.2.5 图文组合3
import templateNewSector3 from '@/components/template/sector/body/index/list/1200x980/1.vue'
//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
//1.2使用url查询导航池id
const targetSegment = getRoutePath(1);
const routeId = ref("");
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if (getRouteId.code == 200) {
    routeId.value = getRouteId.data.category_id
}
//1.3获得频道页导航
const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
    method: 'GET',
    query: {
        'placeid': 1,
        'pid': routeId.value,
        'num': 8
    },
});
//1.4获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//1.5获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref("")
const websiteId = ref("")
//1.6获得站点基本信息
const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    //1.6.1设置站点基本信息
    templateBaseStore.setWebSiteInfo(responseStatus.data)
    websiteId.value = responseStatus.data.website_head.id;//获得网站id
    //1.6.2设置皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
}
//1.7获得广告池
// const adData = ref([]);
// const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement', {
//     method: 'GET',
//     query: {},
// });
// if (adResponseStatus.code == 200) {
//     templateBaseStore.setAdList(adResponseStatus.data)
//     adData.value = adResponseStatus.data;
// }
//1.8.seo
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': routeId.value
    },
});
let seoTitle = setData.data.seo_title;
let seoDescription = setData.data.seo_description;
let seoKeywords = setData.data.seo_keywords;
let seoSuffix = setData.data.suffix;
let seoName = setData.data.website_name;
useSeoMeta({
    title: seoTitle + "_" + seoSuffix,
    meta: [
        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
        { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
    ]
});
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
const response = await requestDataPromise('/client/indexData', {
    method: 'POST',
    body: {
        'website_id':websiteId.value,
        'getpage':'class'
    },
});
//页面数据
const templateData = response.data.template.class;
console.log(templateData)
//广告数据
const adData = ref([]);
adData.value.push(response.data.ad.top)
for(let item of response.data.ad.class){
    adData.value.push(item)
}
templateBaseStore.setAdList(adData.value)


console.log(navigateData)













//2.0 测试数据 后期移除
// const testTemplateData = {
//     "sectorName": "text",
//     "componentList": [
//         {
//             "component_type": 1,//1=新闻 2=广告
//             "component_style": 1,//样式
//             "sort": 1,//组件位置
//             "data": {
//                 "alias":"一级导航名称",
//                 "category_id": 11,
//                 "pinyin": "nongyeshengchan",
//                 "text": [
//                     {
//                         "id": 2863,
//                         "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminxinnongcun/nongcunxinfangshe"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 2862,
//                         "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun/buweidongtai"
//                     },
//                     {
//                         "id": 50126,
//                         "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 3976,
//                         "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50189,
//                         "title": "7以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminhezuoshe"
//                     },
//                     {
//                         "id": 50190,
//                         "title": "8以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminhezuoshe"
//                     }
//                 ],
//                 "img": [
//                     {
//                         "id": 50129,
//                         "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "linyuting123",
//                         "updated_at": "2025-05-30 13:50:54",
//                         "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "cat_arr_id": "[1,201]",
//                         "catid": 201,
//                         "level": "[1,2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:46",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[2]",
//                         "catid": 2,
//                         "level": "[2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:45",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[1]",
//                         "catid": 1,
//                         "level": "[2]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:44",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[11]",
//                         "catid": 11,
//                         "level": "[2]",
//                         "pinyin": "xinnongcun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:43",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[14,240]",
//                         "catid": 240,
//                         "level": "[2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-04-16 11:04:29",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": null,
//                         "catid": 36,
//                         "level": "[2]",
//                         "pinyin": "sannongzixun"
//                     }
//                 ]
//             }
//         },
//         {
//             "component_type": 1,//1=新闻 2=广告
//             "component_style": 1,//样式
//             "sort": 1,//组件位置
//             "data": {
//                 "alias":"一级导航名称2",
//                 "category_id": 11,
//                 "pinyin": "sannongzixun/zhengcefagui",
//                 "text": [
//                     {
//                         "id": 2863,
//                         "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminxinnongcun/nongcunxinfangshe"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 2862,
//                         "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun/buweidongtai"
//                     },
//                     {
//                         "id": 50126,
//                         "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 3976,
//                         "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50189,
//                         "title": "7以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminhezuoshe"
//                     },
//                     {
//                         "id": 50190,
//                         "title": "8以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminhezuoshe"
//                     }
//                 ],
//                 "img": [
//                     {
//                         "id": 50129,
//                         "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "linyuting123",
//                         "updated_at": "2025-05-30 13:50:54",
//                         "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "cat_arr_id": "[1,201]",
//                         "catid": 201,
//                         "level": "[1,2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:46",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[2]",
//                         "catid": 2,
//                         "level": "[2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:45",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[1]",
//                         "catid": 1,
//                         "level": "[2]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:44",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[11]",
//                         "catid": 11,
//                         "level": "[2]",
//                         "pinyin": "xinnongcun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:43",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[14,240]",
//                         "catid": 240,
//                         "level": "[2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-04-16 11:04:29",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": null,
//                         "catid": 36,
//                         "level": "[2]",
//                         "pinyin": "sannongzixun"
//                     }
//                 ]
//             }
//         },
//         {
//             "component_type": 1,//1=新闻 2=广告
//             "component_style": 1,//样式
//             "sort": 3,//组件位置
//             "data": {
//                 "alias":"一级导航名称3",
//                 "category_id": 11,
//                 "pinyin": "sannongzixun/zhengcefagui",
//                 "text": [
//                     {
//                         "id": 2863,
//                         "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminxinnongcun/nongcunxinfangshe"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 2862,
//                         "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun/buweidongtai"
//                     },
//                     {
//                         "id": 50126,
//                         "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 3976,
//                         "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50189,
//                         "title": "7以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminhezuoshe"
//                     },
//                     {
//                         "id": 50190,
//                         "title": "8以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "pinyin": "nongminhezuoshe"
//                     }
//                 ],
//                 "img": [
//                     {
//                         "id": 50129,
//                         "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "linyuting123",
//                         "updated_at": "2025-05-30 13:50:54",
//                         "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "cat_arr_id": "[1,201]",
//                         "catid": 201,
//                         "level": "[1,2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:46",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[2]",
//                         "catid": 2,
//                         "level": "[2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:45",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[1]",
//                         "catid": 1,
//                         "level": "[2]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:44",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[11]",
//                         "catid": 11,
//                         "level": "[2]",
//                         "pinyin": "xinnongcun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-05-30 13:50:43",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": "[14,240]",
//                         "catid": 240,
//                         "level": "[2,3]",
//                         "pinyin": "sannongzixun"
//                     },
//                     {
//                         "id": 50129,
//                         "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
//                         "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
//                         "author": "佚名",
//                         "updated_at": "2025-04-16 11:04:29",
//                         "introduce": "描述",
//                         "islink": 0,
//                         "linkurl": "",
//                         "copyfrom": "本网",
//                         "cat_arr_id": null,
//                         "catid": 36,
//                         "level": "[2]",
//                         "pinyin": "sannongzixun"
//                     }
//                 ]
//             }
//         },
//     ],
//     "ad": {
//         "ad_tag": "nmw_index_0003"
//     }
// }

// //静态链接测试数据
// const testTemplateData2 = {
//     "sectorName": "linkSector",
//     "componentList": [
//         {
//             "component_type": 3,
//             "component_style": 1,
//             "sort": 1,
//             "componentData": {}
//         }
//     ],
//     "sort": 4
// }
//2.页面数据 end---------------------------------------->
</script>

<style lang="less" scoped>
@import '@/assets/css/class.less';
</style>